<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>烟花</title>
        <style media="screen">
            *{
                margin: 0;
                padding: 0;
            }
            #box{
                width:800px;
                height:600px;
                position: relative;
                margin: 100px auto;
                background:#000000;
                border:2px solid red;
                overflow: hidden;
            }
            .ball{
                width: 10px;
                height: 10px;
                border-radius: 50%;
                position: absolute;
                bottom: 0;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
    </body>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript">
        function FireWork(){
            this.container = $("#box");
            // console.log(this.container)
            this.bindEvent();  
            
        }
        FireWork.prototype.bindEvent = function(){
            var self = this;
            // 给容器绑定事件 ;
            // 主体烟花创建并运动到目标点; 
            self.container.click(function( evt ,data){
                var e = data || evt ;
                var fireWork = self.createFireWork();
                // 让元素有一个可靠的起始点;
                fireWork.css({
                    left:e.offsetX
                }) ;
                // 运动;
                // 运动结束有一个回调函数;
                
                $(fireWork).animate({
                    top : e.offsetY
                },800 , function(){
                    fireWork.remove();
                    self.boom( e.offsetX , e.offsetY);
                })
            })
        }
        FireWork.prototype.createFireWork = function(){
            //  1. 创建一个div;
            //  2. div放在页面之中;
            // var div = document.createElement("div");
            var div =$("<div class='ball'></div>")
            // div.className = "ball";
            // div.addClass("ball")
            // div.style.backgroundColor = "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0");
            // this.container.appendChild(div);
            div.css({
                backgroundColor : "#" + Math.round(parseInt("ffffff", 16) * Math.random()).toString(16).padStart( 6 , "0")
            })
            
           this.container.append(div);
           
            return div;
        }
        FireWork.prototype.boom = function( x , y ){
            // 角度
            var deg = 0;
            // 半径 (斜边)
            var r = 100;
            for(var i = 0 ; i < 20 ; i ++){
                var fire = this.createFireWork();
                // fire.style.left = x + "px";
                // fire.style.top  = y + "px";
                fire.css({
                    left:x,
                    top :y
                })
                // 计算目标值; 角度和半径一块计算出来的;
                deg += 18;
                // 在JS之中没有角度 : 有弧度; π / 180 
                // 角度转换弧度 π / 180 * deg;
                var target_x = Math.round(Math.cos( Math.PI / 180 * deg ) * r);
                var target_y = Math.round(Math.sin( Math.PI / 180 * deg ) * r);

                $(fire).animate({
                    left : target_x + x , 
                    top  : target_y + y
                },function(){
                    // this 指向当前的DOM对象;
                    this.remove();
                })
            }            
        }
        FireWork.prototype.autoFire = function(){
            var self = this;
            setInterval(function(){
                var data =({
                    offsetX : Math.round( Math.random() * self.container.width()) + 100,
                    offsetY : Math.round( Math.random() * self.container.height()) + 100
                });
                self.container.trigger("click",[data]);
            }, 2000)
        }
        var fw = new FireWork();
        fw.autoFire()
    </script>
</html>

